<template>
  <a-layout id="components-layout-demo-fixed">
    <!-- {position: 'fixed', zIndex: 1, width: '100%'} -->
    <a-layout-header style="background: #52c41a">
      <div class="logo">塔架人员分布信息</div>
    </a-layout-header>
    <a-layout-content
      :style="{ padding: '0 50px', marginTop: '30px' }"
      @load="uploadFiles"
    >
      <div :style="{ background: '#fff', padding: '24px', minHeight: '560px' }">
        <PersonInfoDlg v-model="sendVal" type="confirm" :personid="personid" :workername="workername" :department="department" :work="work"  v-on:cancel="clickCancel()" @danger="clickDanger()" @confirm="clickConfirm()" dangerText="Delete"></PersonInfoDlg>
        <div>塔架内现有人员数量{{ personCount }}人</div>
        <div style="width: 500px" id="PersonContent">
          <div
            v-for="p in personList"
            :key="p.id"
            v-bind:class="{
              NormalState: true,
              WarnState: p.isDangerous,
              LeaveState: p.isLeave,
            }"
            @click.capture="ShowMessage(p.id)"
          >
            <div class="nameDiv">{{ p.workerName }}</div>
            <div class="timeDiv">入{{ p.enterTime }}</div>
          </div>
        </div>
      </div>
    </a-layout-content>
    <a-layout-footer :style="{ textAlign: 'center' }">
      塔架人员分布信息 ©2022 顾宝刚 刘佳帆 董晓来
    </a-layout-footer>
  </a-layout>
</template>
<script>
import axios from "axios";

import PersonInfoDlg from "./PersonInfoDlg.vue";
export default {
  name: "Personstatic",
  data() {
    return {
      //已经上传的文件列表
      personList: [
        {
          id: "000001",
          workerName: "张三",
          department:"四室",
          work:"电视",
          isNeedHelmet:true,
          isDangerous: false,
          isLeave: false,
          enterTime: "10:00",
          leaveTime: undefined,
        },
        {
          id: "000002",
          workerName: "李四",
          department:"四室",
          work:"电视",
          isNeedHelmet:true,
          isDangerous: false,
          isLeave: false,
          enterTime: "10:00",
          leaveTime: undefined,
        },
        {
          id: "000003",
          workerName: "王五",
          department:"四室",
          work:"电视",
          isNeedHelmet:true,
          isDangerous: true,
          isLeave: false,
          enterTime: "10:00",
          leaveTime: undefined,
        },
        {
          id: "000004",
          workerName: "张三",
          department:"四室",
          work:"电视",
          isNeedHelmet:true,
          isDangerous: true,
          isLeave: false,
          enterTime: "10:00",
          leaveTime: undefined,
        },
        {
          id: "000005",
          workerName: "李四",
          department:"四室",
          work:"电视",
          isNeedHelmet:true,
          isDangerous: false,
          isLeave: true,
          enterTime: "10:00",
          leaveTime: undefined,
        },
        {
          id: "000006",
          workerName: "王五",
          department:"四室",
          work:"电视",
          isNeedHelmet:true,
          isDangerous: true,
          isLeave: true,
          enterTime: "10:00",
          leaveTime: undefined,
        },
        {
          id: "000007",
          workerName: "张三",
          department:"四室",
          work:"电视",
          isNeedHelmet:true,
          isDangerous: true,
          isLeave: true,
          enterTime: "10:00",
          leaveTime: undefined,
        },
        {
          id: "000008",
          workerName: "李四",
          department:"四室",
          work:"电视",
          isNeedHelmet:true,
          isDangerous: false,
          isLeave: true,
          enterTime: "10:00",
          leaveTime: undefined,
        },
        {
          id: "000009",
          workerName: "王五",
          department:"四室",
          work:"电视",
          isNeedHelmet:true,
          isDangerous: true,
          isLeave: true,
          enterTime: "10:00",
          leaveTime: undefined,
        },
      ],
      personCount: 9,
      sendVal: true,
      department: "四室",
      personid: "000002",
      workername: "zhangsan",
      work: "电视",
    };
  },
  components: {
    'PersonInfoDlg': PersonInfoDlg,
  },
  methods: {
    /******************上传文件方法******************/
    async uploadFiles(info) {
      //初始化文件信息
      const fileInfo = {
        uid: info.file.uid,
        name: info.file.name,
        status: "uploading",
        response: "",
        url: "",
      };
      //放入上传列表中，以便于显示上传进度
      this.personList.push(fileInfo);
      //开始真正上传
      //上传接口
      let uploadApiUrl = "http://192.168.2.217:8888/upload";
      //调用公共上传方法
      const res = await this.uploadFilesToServer(
        uploadApiUrl,
        fileInfo.name,
        info.file
      );
      //根据服务端返回的结果判断成功与否，设置文件条目的状态
      if (res == "success") {
        fileInfo.status = "done";
        fileInfo.response = res.msg;
        fileInfo.url = res.data[0].file;
        this.$message.success("上传成功！");
      } else {
        fileInfo.status = "error";
        fileInfo.response = res.msg;
        this.$message.error("上传失败！");
      }
    },
    /******************显示人员信息******************/
    ShowMessage(a) {
      alert(a);
      //找到当前文件所在列表的索引
      let person = this.personList.find(item=>item.id==a);
      if(person!=undefined)
      {
        this.department = person.department;
        this.personid = a;
        this.workername = person.workerName;
        this.work = person.work;
        this.sendVal = true;
      }
      else
        alert("编号错误"+a);

      return true;
    },
    clickCancel() {
      console.log("点击了取消");
    },
    clickDanger() {
      console.log("这里是danger回调");
    },
    clickConfirm() {
      console.log("点击了confirm");
    },
    /******************上传文件公共方法******************/
    uploadFilesToServer(uploadApiUrl, fileName, files) {
      let formData = new FormData();
      formData.append("file", files);
      //添加请求头
      const headers = {
        "Content-Type": "multipart/form-data",
      };
      //配置头
      const request = axios.create({
        headers: headers,
      });
      //开始上传
      return request
        .post(uploadApiUrl, formData)
        .then((response) => {
          return Promise.resolve(response.data);
        })
        .catch((error) => {
          return Promise.reject(error);
        });
    },
  },
};
</script>
<style>
#components-layout-demo-fixed .logo {
  width: 260px;
  height: 31px;
  margin: 16px 24px 16px 1;
  float: left;
  color: aliceblue;
  font-size: large;
}
#PersonContent {
  display: flex;
  flex-wrap: wrap;
}
.NormalState {
  width: 100px;
  height: 50px;
  background-color: forestgreen;
  margin: 10px 10px 10px 10px;
}
.WarnState {
  background-color: coral;
}
.LeaveState {
  background-color: grey;
}
.nameDiv {
  font-size: larger;
  background-color: aqua;
}
.timeDiv {
  font-size: small;
}
</style>
